<template>
  <div class="dashboard">
    <el-row gutter={20}>
      <!-- 今日预约人数 -->
      <el-col :span="8">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>今日预约人数</span>
          </div>
          <div class="text-center">
            <el-tag type="success">{{ todayReservationUserCount }} 人</el-tag>
          </div>
        </el-card>
      </el-col>

      <!-- 预约会议室数 -->
      <el-col :span="8">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>预约会议室数</span>
          </div>
          <div class="text-center">
            <el-tag type="primary">{{ reservationMeetingCount }} 个</el-tag>
          </div>
        </el-card>
      </el-col>

      <!-- 预约实验室数 -->
      <el-col :span="8">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>预约实验室数</span>
          </div>
          <div class="text-center">
            <el-tag type="warning">{{ reservationLabCount }} 个</el-tag>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>

</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getDashboardStats } from '../utils/dashboardApi.ts'

// 存储数据
const todayReservationUserCount = ref(0)
const reservationMeetingCount = ref(0)
const reservationLabCount = ref(0)

// 获取仪表台数据
const fetchDashboardData = () => {
  getDashboardStats()

      .then((response) => {
        todayReservationUserCount.value = response.data["todayReservationUserCount"]
        reservationMeetingCount.value = response.data["reservationMeetingCount"]
        reservationLabCount.value = response.data["reservationLabCount"]
      })
      .catch((error) => {
        console.error('获取仪表台数据失败:', error)
      })
}

// 页面加载时获取数据
onMounted(fetchDashboardData)
</script>

<style scoped>


.box-card {
  margin-bottom: 20px;
}
</style>
